<template>
	<view class="login">
		<view class="login-container">
			<text class="login-title" @click="toHelp()">帮助</text>
			<!-- bangzhuhdsadh -->
			<view class="login-form">
				<u-notify message="登录成功" :show="messageAlert" bgColor="#ff2442"></u-notify>
				<u-button class="login-from-bottom-tow" text="微信登录" color="#05c160" shape="circle"><i>
						<i class="login-from-bottom-tow-1"></i>微信登录
					</i></u-button>
				<text class="login-from-p" @click="toRegister()">其他登录方式 ></text>
				<u-popup :show="show" mode="bottom" :round="10" :closeable="true" @close="close">
					<h1 class="popup-title">选择登录方式</h1>
					<view class="popup-content-box">
						<text class="popup-content-box-text-1" @click="phoneNum()"></text>
						<text class="popup-content-box-text-2" @click="QQNum()"></text>
					</view>
					<view class="popup-check-box">
						<u-checkbox-group placement="column" @change="checkboxChange">
							<u-checkbox shape='circle' activeColor='#ff2442' name='check' :checked="check" size="40rpx">
							</u-checkbox>
						</u-checkbox-group>
						<view class="popup-check-box-text">
							<text>
								我已阅读并同意 <i>《用户协议》</i><i>《隐私政策》</i><i>《儿童/青少年个人信息保护规则》</i>
							</text>
						</view>
					</view>
				</u-popup>
				<u-popup :show="showTow" mode="bottom" :round="10" :closeable="true" @close="close">
					<view class="popup-content">
						<h3 class="popup-title">请阅读并同意以下协议</h3>
						<view class="popup-title-text">
							<i>《用户协议》</i><i>《隐私政策》</i><i>《儿童/青少年个人信息保护规则》</i>
						</view>
						<u-button class="popup-content-button" text="同意并继续" color="#ff2442" shape="circle"
							@click="consent"></u-button>
					</view>
				</u-popup>
				<view class="popup-check-box">
					<u-checkbox-group placement="column" @change="checkboxChange">
						<u-checkbox shape='circle' activeColor='#ff2442' name='check' :checked="check" size="40rpx">
						</u-checkbox>
					</u-checkbox-group>
					<view class="popup-check-box-text">
						<text>
							我已阅读并同意 <i>《用户协议》</i><i>《隐私政策》</i><i>《儿童/青少年个人信息保护规则》</i>
						</text>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script scoped>
	export default {
		data() {
			return {
				login: {
					phone: "",
				},
				show: false,
				showTow: false,
				check: false,
				messageAlert: false
			};
		},
		methods: {
			phoneNum() {
				if (this.check == true) {
					uni.navigateTo({
						url: "/pages/login/phoneLogin/phoneLogin"
					})
				} else {
					this.showTow = true;
				}
			},
			QQNum() {
				if (this.check == true) {
					uni.navigateTo({
						url: ""
					})
				} else {
					this.showTow = true;
				}
			},
			toRegister() {
				this.show = true;
			},
			close() {
				this.show = false;
				this.showTow = false;
			},
			checkboxChange() {
				this.check = !this.check;
			},
			consent() {
				this.check = !this.check;
				this.showTow = false;
			}
		},
	}
</script>

<style>
	.popup-content-box-text-1::before{
		font-family: "iconfont" !important;
		content: "\e600";
		font-size: 90rpx;
	}
	.popup-content-box-text-2::before{
		font-family: "iconfont" !important;
		content: "\e667";
		font-size: 90rpx;
		color: #3baefe;
	}
	.login-from-bottom-tow-1::before{
		font-family: "iconfont" !important;
		content: "\e607";
		font-size: 50rpx;
	}
	.login-container {
		width: 100%;
		height: 1600rpx;
		background: url("@/static/img/beijing.jpg") no-repeat;
		background-size: cover;
		background-position-x: center;
		box-sizing: content-box;
		display: flex;
		flex-direction: column;

	}

	.login-title {
		text-align: right;
		margin: 40rpx 30rpx 0 0;
		font-size: 32rpx;
		color: #989898;
	}

	.login-form {
		width: 100%;
		height: 50%;
		margin-top: 100%;
		display: flex;
		flex-direction: column;
	}

	.login-form-title {
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: space-evenly;
		box-sizing: content-box;
		align-items: center;
	}

	.login-form-title text {
		display: inline-block;
		font-size: 32rpx;
		margin-left: 15%;
	}

	.login-form-title input {
		width: 70%;
		height: 85%;
		margin-left: 5%;
	}

	.login-form-title {
		width: 100%;
		height: 100rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	#login-form-title-text,
	#login-form-title-WeChat {
		width: 70%;
		margin-top: 40rpx;
		margin-left: 15%;
	}

	.login-from-p {
		width: 100%;
		text-align: center;
		margin-top: 50rpx;
		color: #335470;
	}

	.login-from-bottom,
	.login-from-bottom-tow {
		width: 70%;
		margin-left: 15%;
		margin-top: 50rpx;
	}

	.login-from-bottom-tow i {
		font-style: normal;
		display: flex;
		align-items: center;
	}

	.login-from-bottom-tow i>image {
		width: 50rpx;
		height: 50rpx;
		object-fit: cover;
		object-position: center;
	}

	#login-from-bottom-checkbox navigator {
		color: #335470;
	}


	.popup-title-text {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.popup-title-text i {
		font-style: normal;
		color: #6a94c8;
		font-size: 22rpx;
	}

	.popup-content-box {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: space-evenly;
		box-sizing: content-box;
	}

	.popup-content-box text {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-top: 5%;
	}

	.popup-title {
		/* 		width: 100%;
		height: 25%; */
		display: block;
		text-align: center;
		border-bottom: 2rpx solid #989898;
		padding: 30rpx 0;
	}

	.popup-text {
		width: 85%;
		height: 100rpx;
		color: #6e9cce;
		margin-left: 7.5%;
		margin-top: 10%
	}

	.popup-content-box-i {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
	}

	.popup-content-button {
		width: 80%;
		margin-bottom: 90rpx;
	}

	.popup-check-box {
		display: flex;
	}

	.popup-check-box-text {
		text-align: center;
		margin-bottom: 100rpx;
	}

	.popup-check-box-text text i {
		font-style: normal;
		color: #4a6286;

	}
</style>